<template>
  <div class="UserAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="手机号码" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['phone']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="用户类型" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['userType']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="2">扫码登录</a-select-option>
                <a-select-option :value="1">刷会员卡登录</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="注册时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['registerTime']"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="地域" :label-col="{ span: 6 }" :wrapper-col="{ span: 17,offset:1 }">
              <a-cascader
                style="width: 100%"
                v-decorator="['residence']"
                :options="posAddress"
                placeholder="请选择"
              />
            </a-form-item>
          </a-col>
          <a-col :span="15" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findUserListByCondition($event)">查询</a-button>
            <a-button type="dashed" @click="exportUser()">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.userId"
      >
        <template slot="territory" slot-scope="text,record">
          <span>{{record.registryProvince}}{{record.registryCity}}</span>
        </template>
        <template slot="operation" slot-scope="text,record">
          <div class="blue" @click="consumeRecord(text,record)">消费记录</div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import moment from "moment";

const columns = [
  {
    title: "手机号",
    dataIndex: "phoneNum",
    scopedSlots: { customRender: "phone" },
    align: "center"
  },
  {
    title: "用户类型",
    dataIndex: "userType",
    scopedSlots: { customRender: "userType" },
    align: "center"
  },
  {
    title: "地域",
    dataIndex: "territory",
    scopedSlots: { customRender: "territory" },
    align: "center"
  },
  {
    title: "累计消费单数",
    dataIndex: "orderNum",
    scopedSlots: { customRender: "theCumulativeNumber" },
    align: "center"
  },
  {
    title: "累计消费金额",
    dataIndex: "totalMoney",
    scopedSlots: { customRender: "theCumulativeSum" },
    align: "center"
  },
  {
    title: "注册时间",
    dataIndex: "cerateTime",
    scopedSlots: { customRender: "registerTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];
const data = [
  {
    key: "1",
    phone: "18700000000",
    userType: "扫码登录",
    territory: "上海市",
    theCumulativeNumber: "5",
    theCumulativeSum: "132.56",
    registerTime: "2019/02/12 12:23:24",
    operation: "详情"
  }
  // {
  //   key: "2"
  // },
  // {
  //   key: "3"
  // }
];
export default {
  name: "UserAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {},
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      posAddress: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
      this.startTime = "";
      this.endTime = "";
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;

      this.findUserListByCondition();
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },

    // 查询用户列表
    findUserListByCondition($event) {
      if ($event) {
        this.pagination.current = 1;
      }
      var values = this.form.getFieldsValue();
      console.log(values);
      if (values.registerTime == undefined) {
        values.registerTime == undefined;
      } else {
        this.startTime = moment(values.registerTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.registerTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      // console.log(values);
      this.axios
        .post(this.baseUrl + "/user/findUserListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          province: values.province,
          city: values.city,
          startTime: this.startTime,
          endTime: this.endTime,
          userType: values.userType,
          phoneNum: values.phone
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 返回省市县级联数据
    provinces() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/user/web-list", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          this.posAddress = response.data.data.options;
        });
    },

    // 消费记录跳转页面传ID
    consumeRecord(text, record) {
      let [userId, phoneNum, cerateTime, registryProvince, registryCity] = [
        record.userId,
        record.phoneNum,
        record.cerateTime,
        record.registryProvince,
        record.registryCity
      ];
      this.$store.commit("userId", userId);
      this.$store.commit("phoneNum", phoneNum);
      this.$store.commit("cerateTime", cerateTime);
      this.$store.commit("registryProvince", registryProvince);
      this.$store.commit("registryCity", registryCity);
      this.$router.push({
        path: "/home/useradmin/expenserecord"
      });
    },

    // 代理商库存详情导出
    exportUser() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/user/exportUser",
          {
            loginToken: this.$store.state.loginToken,
            province: values.province,
            city: values.city,
            startTime: this.startTime,
            endTime: this.endTime,
            userType: values.userType,
            phoneNum: values.phone
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createEflement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "用户管理表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.findUserListByCondition();
    this.provinces();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.UserAdmin {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.key {
  color: rgb(98, 144, 255);
}
</style>
